<template>
  <div class="goodsDetail">
    <content-header showBack>商品详情</content-header>
    <div class="container">
      <div class="body">
        <div class="spin" v-if="loading"><a-spin /></div>
        <a-tabs default-active-key="1" @change="tabsChange" v-else>
          <a-tab-pane key="1" tab="商品信息">
            <a-form-model layout="horizontal" :model="form" ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-model-item label="商品名称" prop="title" required>
                <a-input v-model="form.title" />
              </a-form-model-item>
              <a-form-model-item label="商品封面图" prop="pic" required>
                <picSelector :value="form.pic" @confirm="(path)=>form.pic = path" ></picSelector>
              </a-form-model-item>
              <a-form-model-item label="商品栏目" prop="class_id" required>
                <a-tree-select
                  v-model="form.class_id"
                  :treeDefaultExpandedKeys="[form.class_id]"
                  :replaceFields="{key:'id',value:'id'}"
                  style="width: 200px"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="classData"
                  placeholder="选择栏目"
                >
                </a-tree-select>
              </a-form-model-item>
              <a-form-model-item label="选择规格">
                <spec ref="spec"></spec>
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key="2" tab="商品详情" style="width:100%" forceRender>
            <div id="editor">
              <vue-ueditor-wrap v-model="form.content" :config="ueConfig"></vue-ueditor-wrap>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="其他设置" >
            <a-form-model layout="inline" :model="form" ref="form_others" style="margin-bottom:20px">
              <a-form-model-item label="销量">
                <a-input placeholder="请输入销量" v-model="form.sales"/>
              </a-form-model-item>
              <a-form-model-item label="库存">
                <a-input placeholder="请输入库存" v-model="form.stock"/>
              </a-form-model-item>
              <a-form-model-item label="排序">
                <a-input placeholder="请输入排序" v-model="form.sort"/>
              </a-form-model-item>
            </a-form-model>
            <a-form-model layout="inline" :model="form" ref="form_others">
              <a-form-model-item label="状态">
                <a-radio-group v-model="form.type" :options="options"  />
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
        </a-tabs>
        <a-button type="primary" class="btn" @click="submitForm">提交</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import picSelector from 'components/picSelector'
import spec from 'components/spec'
import ueConfig from 'public/config/ueConfig.js'
import VueUeditorWrap from 'vue-ueditor-wrap'
import request from 'api/request'

const options = [
  {value:1,label:'上架'},
  {value:2,label:'下架'},
  {value:3,label:'回收站'}
]

export default {
  components:{
    contentHeader,
    picSelector,
    spec,
    VueUeditorWrap
  },
  data(){
    return{
      labelCol: { span: 2 },
      wrapperCol: { span: 22 },
      id:'',
      form:{
        title:'',
        pic:'',
        type:1,
        sort:0,
        sales:0,
        stock:0,
        content:'',
        class_id:'',
        spec_id:''
      },
      options,
      ueConfig,
      loading:false,
      classData:[],
      mod:'add'
    }
  },
  created() {
    let id = this.$route.query.id
    this.getClass()
    if(id){
      this.getDetail(id)
      this.id = id
    }
  },
  mounted() {
  },
  methods: {
    getDetail(id){
      this.loading = true
      request.get("/product/detail",{id}).then(e=>{
        if(e.status == 200){
          this.loading = false
          let data = e.data[0]
          let form = {
            title:data.title,
            pic:data.pic,
            type:data.type,
            sort:data.sort,
            sales:data.sales,
            stock:data.stock,
            spec_id:data.spec_id,
            class_id:data.class_id,
            content:data.content
          }
          this.form = form
          let tmp = JSON.parse(data.tmp)
          let list = JSON.parse(data.list)
          setTimeout(()=>{
            this.$refs.spec.setData(data.spec_type,tmp,list)
          },0)
          this.mod = 'edit'
        }else{
          this.$router.back(-1)
        }
      })
    },
    getClass(){
      request.get("/product/getClass").then(e=>{
        if(e.status == 200){
          let arr = [{id:0,title:'无栏目'}]
          for(let i of e.data){
            if(i.pid == 0){
              i.children = e.data.filter(s=>s.pid == i.id)
              arr.push(i)
            }
          }
          this.classData = arr
        }
      })
    },
    tabsChange(key){
      
    },
    submitForm(){
      this.$refs.form.validate((valid)=>{
        if(valid){
          let form = this.form
          let data = Object.assign(form,this.$refs.spec.outPut())
          data.list = JSON.stringify(data.list)
          data.tmp = JSON.stringify(data.tmp)
          if(this.mod == 'add'){
            request.post("/product/add",data).then(e=>{
              if(e.status == 200){
                this.$message.success("添加成功")
                this.$router.back(-1)
              }else{
                this.$message.error("添加失败")
              }
            })
          }else{
            data.id = this.id
            request.post("/product/edit",data).then(e=>{
              if(e.status == 200){
                this.$message.success("修改成功")
                this.$router.back(-1)
              }else{
                this.$message.error("修改失败")
              }
            })
          }
        }
      })
    }
  },
  beforeDestroy() {
  },
}
</script>

<style scoped>
  .goodsDetail .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .goodsDetail .container .body .spin{
    text-align: center;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }
  .goodsDetail .container .body{
    padding: 16px;
  }
  .goodsDetail .container .body .btn{
    margin-left: 20px;
    margin-top: 20px;
  }
  .ant-form-inline .ant-form-item:first-of-type{
    margin-left: 14px;
  }
</style>